<template>
  <!-- 选项为字典的选择器 -->
  <fragment>
    <el-select
      ref="selectDict"
      v-model="value"
      clearable
      filterable
      :multiple="multiple"
      v-bind="$attrs"
      style="width:100%"
      @change="changeSel"
      @visible-change="selectCopy"
    >
      <slot></slot>
      <el-option
        v-for="item in list"
        :key="item.value"
        :label="item.dictName"
        :value="item.dictCode"
      ></el-option>
    </el-select>
  </fragment>
</template>
<script>
import { getDictByType } from '@/api/dataDict'
export default {
  name: 'SelectForDict',
  inheritAttrs: false,
  props: {
    code: {
      type: [String, Number, Array],
      default: ''
    },
    name: {
      type: [String, Array],
      default: ''
    },
    dictTypeCode: {
      type: String,
      default: ''
    },
    appCode: {
      type: String,
      default: 'call-center'
    },
    domainCode: {
      type: String,
      default: 'marketing'
    },
    multiple: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      list: [],
      value: '',
      tempName: ''
    }
  },
  watch: {
    code: {
      handler(val) {
        if (this.multiple) {
          if (val.length) {
            this.value = val.map(e => {
              return e.toString()
            })
          }
        } else {
          this.value = val.toString()
        }
      },
      immediate: true
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    changeSel(val) {
      if (this.multiple) {
        const nameList = []
        const itemList = []
        val.forEach(code => {
          const item = this.list.find(e => {
            return e.dictCode === code
          })
          nameList.push(item.dictName)
          itemList.push(item)
        })
        this.$emit('update:name', nameList)
        this.$emit('on-change', itemList)
      } else {
        const obj = this.list.find(e => {
          return e.dictCode === val
        })
        const name = obj ? obj.dictName : ''
        this.tempLable = name
        this.$emit('update:name', name)
        this.$emit('on-change', obj)
      }
      this.$emit('update:code', val)
    //   const curName = this.list.find(e => {
    //     return e.dictCode === val
    //   }).dictName
    //   this.tempName = curName
    //   this.$emit(
    //     'update:name',
    //     curName
    //   )
    },
    getList() {
      const { dictTypeCode, appCode, domainCode } = this
      getDictByType({ dictTypeCode, appCode, domainCode }).then(res => {
        this.list = res.data
      })
    },
    // 全选反选
    selectAll(type) {
      const list = this.list
      const value = this.value
      const t = []
      if (type === 'neg') {
        for (const item of list) {
          if (!value.includes(item.dictCode)) {
            t.push(item.dictCode)
          }
        }
      } else {
        for (const item of list) {
          t.push(item.dictCode)
        }
      }
      this.value = t
      this.changeSel(t)
    },
    // 远程搜索可选
    selectCopy(v) {
      const select = this.$refs.selectDict
      if (!select) return
      try {
        if (!v) select.blur()
        // 使远程搜索框可以选择
        if (v) {
          if (select.value !== '') {
            select.selectedLabel = select.currentPlaceholder
          } else if (select.query !== '') {
            select.selectedLabel = select.query
          }
        }
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
